<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css" >
			*{margin:0;padding:0;}
		body{overflow:hidden;
			background:#ccc;}
		.balloon{
			top:200px;
			left:200px;
			width:160px;
			height:160px;
			background:#faf9f9;
			position:absolute;
			border-radius:160px 160px 64px 160px;
			-webkit-transform: rotate(45deg);
			box-shadow: -8px -8px  80px -8px #873940 inset;
			
		}
		.balloon::after{
			content:'';
			position: absolute;
			width: 0; 
			height: 0;
			border:8px solid transparent  ;
			border-right-color:#FF7F50;
			border-radius: 16px;
			transform: rotate(45deg);
			bottom: -2px;
			right: -2px;
			
		}
		</style>
	</head>
	<body>
	<!--	<div class="balloon"></div>-->
	<script>
		//这里设定一次出多少
		var num = 10;
		//获取屏幕宽度
		var wW = window.innerWidth;
		//获取屏幕高度
		var wH = window.innerHeight;
		var timer = null ;
		var bw = 160 ;
		init(num);
		timer = setInterval(move,1000/30);
		function init(num){
		for(var i=0;i<num; i++){
		
			//生成随机数var randomx = Math.random()
			//不超过屏幕最右边
			var randomx = Math.random()*wW-bw;
			//不超过屏幕最左边0跟一个随机数比取大值
			randomx = Math.max(0,randomx);
			//创建div节点
			var oballoon = document.createElement('div');
			//为创建的节点(oballon)增加class.
			oballoon.className = 'balloon';
			//将创建节点加入body
			document.body.appendChild(oballoon);
			//设置气球的横坐标
			oballoon.style.left = randomx+'px';
			//设置高度气球位置
			oballoon.style.top = wH- bw +'px' ; 
			oballoon.speed = Math.random()*7+1
		}
		}
		
		
	
		document.body.addEventListener('click',function(e){
			//事件代理
				if(e.target.className.toLowerCase()==='balloon'){
				boom.call(e.target,function(){
					this.parentNode.removeChild(this)
					init(1);
				}.bind(e.target));
//					e.target.parentNode.removeChild(e.target);
				};
			},false)
		
			function move(){
			var oballoons = document.querySelectorAll('.balloon');
			for(var i=0 , len=oballoons.length; i<len; i++){
				oballoons[i].style.top =  
				oballoons[i].offsetTop - 
				oballoons[i].speed+'px';
			}
			
		}
		
		function boom(cb){
			this.timer = setInterval(function(){
				if(this.offsetWidth<10){
					clearInterval(this.timer);
					cb&&cb();
				}
				this.speed++;
				this.style.width = this.offsetWidth - 10 +'px';
				this.style.height = this.offsetHeight - 10 +'px';
				
				
			}.bind(this),1000/60)  
		}
	</script>
	</body>
</html>
